  <!-- 商铺、写字楼 -->
<template>
    <div class="dailog-box">
      <el-form :model="data" ref="form" label-width="220px" size="small" label-position="left" >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="资产编码" prop="chargeItemCode">
              <el-input  v-model="data.chargeItemCode" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="CAD面积" prop="cadArea">
              <el-input  v-model="data.cadArea" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联合同" prop="contractName">
              <el-input  v-model="data.contractName" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前客户名称" prop="leaserShopName">
              <el-input  v-model="data.leaserShopName" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前合同截止日" prop="contractEndDate">
              <el-date-picker  v-model="data.contractEndDate" type="date" placeholder="请选择日期" disabled> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划举措" prop="planType">
              <el-select  v-model="data.planType" placeholder="请选择" clearable :disabled="!isEdit">
                <el-option v-for="item in planconstantMap.planType" :key="item.key" :label="item.value" :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离场时间" prop="leaveDate">
              <el-date-picker  v-model="data.leaveDate" type="date" placeholder="请选择日期" :disabled="!isEdit"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="清退成本(元)" prop="clearCost">
              <el-input type="number" v-model="data.clearCost" placeholder="请输入" :disabled="!isEdit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划租金模式" prop="rentMode" :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-select  v-model="data.rentMode" placeholder="请选择" clearable>
                <el-option v-for="item in planconstantMap.rentMode" :key="item.key" :label="item.value" :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划起租日" prop="rentStartDate" :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit"  v-model="data.rentStartDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="rentEndDate" :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit" v-model="data.rentEndDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业态类型" prop="industryType" :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-select :disabled="!isEdit" v-model="data.industryType" placeholder="请选择" clearable>
                <el-option v-for="item in industryTypeList" :key="item.primaryKey" :label="item.catalogName" :value="item.primaryKey"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否主力店" prop="ifMainStore" :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-select :disabled="!isEdit"  v-model="data.ifMainStore" placeholder="请选择" clearable>
                <el-option v-for="item in mattersType" :key="item.key" :label="item.value" :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="押金(元)" prop="depositAmount" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input :disabled="!isEdit" type="number"  v-model="data.depositAmount" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="押金付款日" prop="depositPaymentDate"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit" v-model="data.depositPaymentDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <div class="more-text">
            <el-col :span="12">
              <el-form-item label="租金指导价(元/天/㎡)" prop="rentUnitPrice"  :rules="{required: true, message: '请输入', trigger: 'blur'}">
                <el-input :disabled="!isEdit" type="number"  v-model="data.rentUnitPrice" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="12">
            <el-form-item label="预计分成比例" prop="shareProportion"  :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input :disabled="!isEdit" type="number"  v-model="data.shareProportion" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租金缴费周期" prop="rentCollectionCycle"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-select  :disabled="!isEdit" v-model="data.rentCollectionCycle" placeholder="请选择" clearable >
                <el-option v-for="item in planconstantMap.rentCollectionCycle" :key="item.key" :label="item.value" :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租金起付日" prop="rentFeeStartDate"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit"  v-model="data.rentFeeStartDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <div class="more-text" v-if="data.rentMode == 'fixed'">
            <el-col :span="12">
              <el-form-item label="固定部分租金(元)" prop="monthlyRentAmount"  :rules="{required: true, message: '请输入', trigger: 'blur'}">
                <el-input :disabled="!isEdit" type="number"  v-model="data.monthlyRentAmount" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="12" v-if="data.rentMode == 'share' || data.rentMode == 'fixed_share'">
            <el-form-item label="预计分成部分租金(元)" prop="shareRentAmount"  :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input :disabled="!isEdit" type="number"  v-model="data.shareRentAmount" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="data.rentMode == 'share' || data.rentMode == 'fixed_share'">
            <el-form-item label="分成租金缴费周期" prop="shareRentCycle"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-select  :disabled="!isEdit" v-model="data.shareRentCycle" placeholder="请选择" clearable >
                <el-option v-for="item in planconstantMap.rentCollectionCycle" :key="item.key" :label="item.value" :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="data.rentMode == 'share' || data.rentMode == 'fixed_share'">
            <el-form-item label="分成租金起付日" prop="rentFeeStartDate"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit"  v-model="data.shareRentStartDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="data.rentMode == 'fixed' || data.rentMode == 'share' || data.rentMode == 'get_high'">
            <el-form-item label="预计扣点部分租金(元)" prop="deductionRentAmount"  :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input :disabled="!isEdit" type="number"  v-model="data.deductionRentAmount" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="data.rentMode == 'fixed' || data.rentMode == 'share' || data.rentMode == 'get_high'">
            <el-form-item label="扣点租金缴费周期" prop="deductionRentCycle"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-select  :disabled="!isEdit" v-model="data.deductionRentCycle" placeholder="请选择" clearable >
                <el-option v-for="item in planconstantMap.rentCollectionCycle" :key="item.key" :label="item.value" :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="data.rentMode == 'fixed' || data.rentMode == 'share' || data.rentMode == 'get_high'">
            <el-form-item label="扣点租金起付日" prop="deductionRentStartDate"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit"  v-model="data.deductionRentStartDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <div class="more-text">
            <el-col :span="12">
              <el-form-item label="管理费指导价(元/天/㎡)" prop="managementGuidePrice"  :rules="{required: true, message: '请输入', trigger: 'blur'}">
                <el-input :disabled="!isEdit" type="number"  v-model="data.managementGuidePrice" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div class="more-text">
            <el-col :span="12">
              <el-form-item label="预计管理费单价(元/天/㎡)" prop="managementUnitPrice"  :rules="{required: true, message: '请输入', trigger: 'blur'}">
                <el-input :disabled="!isEdit" type="number"  v-model="data.managementUnitPrice" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="12">
            <el-form-item label="管理费缴费周期" prop="managementFeeCycle"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-select :disabled="!isEdit"  v-model="data.managementFeeCycle" placeholder="请选择" clearable>
                <el-option v-for="item in planconstantMap.managementFeeCycle" :key="item.key" :label="item.value" :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理费起付日" prop="managementFeeStartDate"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit"  v-model="data.managementFeeStartDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预估租赁成本" prop="rentCost"  :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input :disabled="!isEdit" type="number"  v-model="data.rentCost" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成本发生时间" prop="rentCostDate"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
              <el-date-picker :disabled="!isEdit"  v-model="data.rentCostDate" type="date" placeholder="请选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="showFile">
          <el-col :span="24" style="min-height:50px;">
            <el-form-item label="附件" style="margin-bottom:0!important;">
              <el-upload class="upload-demo"  :file-list="fileList" action="no" :on-remove="handleRemove" :http-request="event => beforeupload(event.file)">
                <el-button type="primary" plain class="addSpan" style="margin-right: 10px" size="mini">上传附件</el-button>
              </el-upload>
              <el-button type="text" v-for="(file, i) in data.businessAttachmentMapListCloudDto" :key="i" @click="DownFile(file)">{{ file.fileTitle }} </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="height:50px;">
            <el-form-item label="提示："> {{ errorMessage.resultMessage }} </el-form-item>
          </el-col>
          <el-col :span="24" style="height:50px;">
            <el-form-item label="说明：">
              <el-input :disabled="!isEdit" size="mini" type="textarea" autosize v-model="data.configDesc"></el-input>
            </el-form-item>
          </el-col>
        </div>
        <!-- 优惠 -->
        <div v-if="data.planType==4">
          <div class="reimbursement-asset">
            <div class="reimbursement-asset-name">增加优惠</div>
            <div v-if="isEdit" class="reimbursement-asset-name-btn"  @click="AdddiscountsItemListCloudDto()">添加</div>
          </div>
          <div v-for="(item, index) in discountsItemListCloudDto" :key="index">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="选择收款时间" label-width="150px">
                  <el-select v-model="item.paymentDate" placeholder="请选择">
                    <el-option v-for="(item) in paymentDateoptions" :key="item.key" :label="item.value" :value="item.key"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="优惠金额" label-width="150px">
                  <el-input type="number" v-model="item.paymentAmount" :step="10" placeholder="请输入金额"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <div style="text-align: right; height: 62px;padding-right:10px">
                  <el-button size="small" type="text"  @click="DeldiscountsItemListCloudDto(index)">删除优惠</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 优惠 end -->
        <el-col v-if="isEdit">
          <el-form-item>
            <div class="t-right padding-top-15" >
              <el-button  type="primary" size="small" @click="save('form')" plain>确定</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
</template>

<script>
import { uploadPhoto } from '@/api';
import {listByTypes} from '../../../../api/businessManagementOperation'
export default {
  props: {
    buildingData: {
      type: Object,
      default:{},
    },
    errorMessage:{
      type: Object,
      default:{},
    },
    isEdit:{
      type: Boolean,
      default:false,
    },
  },
  watch:{
    errorMessage:{
      immediate:true,
      deep:true,
      handler(val){
        if(!val.success){
          this.showFile= true
        }else{
          this.showFile= false
        }
      }
    }
  },
  data() {
    return {
      showFile:false,
      fileList:[],
      planconstantMap:{},
      industryTypeList:[],
      paymentDateoptions:[
        { key:1, value:'一月'},
        { key:2, value:'二月'},
        { key:3, value:'三月'},
        { key:4, value:'四月'},
        { key:5, value:'五月'},
        { key:6, value:'六月'},
        { key:7, value:'七月'},
        { key:8, value:'八月'},
        { key:9, value:'九月'},
        { key:10, value:'十月'},
        { key:11, value:'十一月'},
        { key:12, value:'十二月'},
        ],
      discountsItemListCloudDto:[],
      businessAttachmentMapListCloudDto:[],
      data:{},
      mattersType:[{key:0,value:'否'},{key:1,value:'是'}]
    };
  },
 
  created(){
    
  },
  methods: {
    init(){
      this.data = Object.assign({}, this.buildingData.planAssetContractDto, this.buildingData.billConfigCloudDto)
      this.discountsItemListCloudDto = this.buildingData.discountsItemListCloudDto || []
      this.businessAttachmentMapListCloudDto = this.buildingData.businessAttachmentMapListCloudDto || []
      this.fileList = this.buildingData.businessAttachmentMapListCloudDto || []
      if(this.businessAttachmentMapListCloudDto&&this.businessAttachmentMapListCloudDto.length>0){
        this.showFile = true
      }
      let t = setInterval(() => {
        if(this.$store.state.planconstantMap){
          this.planconstantMap = this.$store.state.planconstantMap
          console.log(this.planconstantMap)
          clearInterval(t)
        }
      }, 1000);
      this.listByTypes()
    },
    //日期验证
    validata(obj) {
      if (obj.leaveDate && obj.rentStartDate) {
        if (obj.leaveDate <= obj.rentStartDate) {
          this.$message.warning('离场时间必须大于计划起租日');
          return true;
        }
      }
      if (obj.rentStartDate && obj.rentEndDate) {
        if (obj.rentStartDate >= obj.rentEndDate) {
          this.$message.warning('开始时间/起租日，必须小于结束时间');
          return true;
        }
      }
      return false;
    },
    //保存
    save(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.validata(this.data)) return;
          this.$emit('FormVerify',{
            billConfigCloudDto:this.data,
            discountsItemListCloudDto:this.discountsItemListCloudDto,
            businessAttachmentMapListCloudDto:this.businessAttachmentMapListCloudDto,
          })
        } 
      });
    },
    //增加优惠
    AdddiscountsItemListCloudDto(){
      this.discountsItemListCloudDto.push({
        paymentDate:'',
        paymentAmount:''
      })
    },
    //删除优惠
    DeldiscountsItemListCloudDto(index){
      if(!this.isEdit){
        return
      }
      this.discountsItemListCloudDto.splice(index, 1);
    },
    async listByTypes(){
      let res = await listByTypes({ 
        bizId:'commercial_rent_main_data',
        catalogTypeList:['business_type_child'],
        mapBizId: localStorage.getItem('userEnterpriseid')})
      if(res.rows){
        this.industryTypeList = res.rows
      }
    },
    beforeupload(file, a) {
      uploadPhoto(file).then(res => {
        this.fileList.push(file)
        this.businessAttachmentMapListCloudDto = [{ fileUrl: res.data.rows[0].url, fileTitle: res.data.rows[0].originalName, fileId: res.data.rows[0].key,uid:file.uid }];
        this.$message.success('上传成功');
      });
    },
    handleRemove(file){
      this.businessAttachmentMapListCloudDto.forEach(((ele,index)=>{
        if(ele.uid == file.uid){
          this.businessAttachmentMapListCloudDto.splice(index, 1)
        }
      }))
    },
    DownFile(file) {
      window.open(file.fileUrl);
    },
    closeDialog(){
      this.data={}
      this.fileList = []
      this.paymentDateoptions=[]
      this.discountsItemListCloudDto=[]
      this.businessAttachmentMapListCloudDto=[]
    }
  },
};
</script>

<style lang="scss" scoped>
  .reimbursement-asset{
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
    margin-bottom: 20px;
    .reimbursement-asset-name{
      font-size: 16px;
      font-weight: 600;
      line-height: 30px;
      height: 30px;
    }
    .reimbursement-asset-name-btn{
      line-height: 30px;
      height: 30px;
      margin-left: 20px;
      color: #409EFF;
      cursor: pointer;
    }
  }
  .el-row .el-col {
    height: 50px;
  }

</style>
